<template>
  <r-operator
    ref="el"
    class="main-info"
    :operators="['edit']"
    @edit="isShowEdit = !isShowEdit"
  >
    <r-title icon="intention" :isShow="isTitleShow" v-model="title" />
    <div class="main-info__content" :class="infoCls">
      <template :key="index" v-for="(item, index) in dataList">
        <div class="main-info__content--item" v-if="item.value">
          <i class="resume resume-del" @click="delItem(index)" />
          <img alt="图标" width="15px" v-if="item.icon" :src="item.icon" />
          <span>{{ item.value || item.name }}</span>
        </div>
      </template>
    </div>
    <teleport to="#app">
      <edit
        :originData="dataList"
        @save="onSave"
        v-model="isShowEdit"
        v-if="isShowEdit"
      />
    </teleport>
  </r-operator>
</template>

<script>
import RTitle from "@/components/base/RTitle";
import ROperator from "@/components/base/ROperator";
import useData from "../useData";
import { ref, onMounted } from "vue";
import Edit from "./edit";

export default {
  name: "BaseInfo",
  components: { Edit, ROperator, RTitle },
  props: {
    id: [String, Number],
  },
  setup(props) {
    const el = ref(null);
    const isShowEdit = ref(false);
    const infoCls = ref("info-row");
    const baseData = useData(props.id);
    onMounted(() => {
      infoCls.value = el.value.clientWidth > 410 ? "info-row" : "info-column";
    });
    const delItem = (index) => (baseData.dataList.value[index].value = "");
    const onSave = (newData) => {
      isShowEdit.value = false;
      baseData.dataList.value = newData;
    };
    // const getInfoPadding
    return {
      ...baseData,
      el,
      isShowEdit,
      infoCls,
      delItem,
      onSave,
    };
  },
};
</script>

<style scoped lang="less">
.main-info {
  padding-top: 0;
  min-height: 0;

  .resume-del {
    position: absolute;
    right: -6px;
    top: -6px;
    font-size: 12px;
    display: none;
  }

  &__content {
    display: flex;
    flex-wrap: wrap;

    &--item {
      position: relative;
      padding: 2px;
      display: flex;
      flex-direction: row;
      cursor: pointer;

      &:hover {
        background: rgba(246, 246, 246, 0.8);

        .resume-del {
          display: block;
        }
      }
    }
  }

  .info-row {
    flex-direction: row;
  }

  .info-column {
    flex-direction: column;
  }

  .info-row .main-info__content--item:not(:last-child):after {
    content: "|";
    display: inline-block;
    margin-left: 2px;
  }
}
</style>
